<template>
	<div>
		<div class="topwraper">
			<div style="flex:1">
				<el-row :gutter="10">
					<el-col :span="4">
						<el-input placeholder="请输入作品名称"></el-input>
					</el-col>
					<el-col :span="20">
						<el-button icon="Search" type="primary">搜索</el-button>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-button type="primary" icon="Plus">创建作品</el-button>
			</div>
		</div>
		<div style="width: 100%; margin-top: 15px;">
			<el-table :data="tableData" style="width: 100%; " border
				:header-row-style="{'height':'50px','background':'#5df891'}">
				<el-table-column label="全景名称" prop="title">
					<template v-slot="scope">
						<div style="display: flex;">
							<div style="margin:0px 5px;">
								<el-image :src="scope.row.thumb" style="width: 40px;"></el-image>
							</div>
							<div>
								<div style="font-weight: bold;">{{scope.row.title}}</div>
								<div style="font-size: 12px;color: #888; display: flex;">
									<div style="display: flex;">
										<Edit style="width: 1em; height: 1em; padding:6px 2px 0px 0px;" />
										<div>{{scope.row.createtime}}</div>
									</div>
									
									<div style="display: flex; margin-left: 20px;">
										<View style="width: 1em; height: 1em; padding:6px 2px 0px 0px;" />
										<div>{{scope.row.views}}</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300px" align="center">
					<template v-slot="scope">
						<el-button type="primary" icon="Edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
						<el-button type="primary" icon="Share">分享</el-button>
						<el-button type="danger" icon="Delete">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import request from '../../../utils/request'
	export default {
		data() {
			return {
				filterData:{
					title:""
				},
				curpage:1,
				pagesize:10,
				numrows:1,
				tableData: [{
					id: '234234234',
					title: "策划四",
					thumb: 'https://720.xtspace.cn/file/view/img/1876892675806875649/thumb/1/1.jpg',
					createtime: '2025-04-26 22:40:48',
					views: 200
				}]
			}
		},
		mounted(){
			//暗黑模式
			var html=window.document.documentElement;
			html.className="";
			this.loadPanoList();
		},
		methods:{
			loadPanoList(){
				const params={
					curpage:this.curpage,
					pagesize:this.pagesize,
					title:this.filterData.title
				}
				request.post("/api/pano/list_by_page",params).then(res=>{
					if(res.status==200 && res.data.code){
						this.numrows=res.data.numrows;
						this.curpage=res.data.curpage;
						this.tableData=res.data.list;
					}
				});
				
			},
			handleEdit(index,data){
				this.$router.push("/editor/basic/pano123");
			}
		}
	}
</script>

<style scoped>
	.topwraper {
		display: flex;
	}
</style>